<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/common/html/head :: head_Normal(~{::title},~{::link},~{::style})">

<title th:text=${title}></title>
<!-- 这儿引用单独的css link -->
<!-- Ladda for Bootstrap 3按钮加载进度插件 -->
<link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
<!-- bootstrap-table表单样式 -->
<link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/admin/assets/js/select2/css/select2.min.css}" rel="stylesheet"/>
<style type="text/css">
    .control-label {
        margin-top: 10px;
    }

    .row{
        margin: 0%;
    }

    #bar-show{
        margin-top: 21px;
        width: 100%;
        height: 530px;
        /*background-color: #0AA699*/
    }
    #bar-content{
        position: absolute;
        width: 96%;
        height: 80%;
        /*background-color: pink;*/
        margin: 15px 5px;
    }

</style>

</head>

<body id="listbody">




<!-- ###############################代码编写处############################### -->

<!-- 右边内容 -->
<div class="wrap-fluid">
    <div class="container-fluid paper-wrap bevel tlbr">
        <!-- 内容 -->
        <!--标题 通用-->
        <div th:replace="admin/common/html/title :: title(${title},${parenttitle},${isMsg},${msgHTML})">
        </div>
        <!-- 结束标题 通用-->
        <div class="content-wrap">
            <!-- 结束内容 -->
            <div class="row">
                <div class="col-sm-12">
                <!-- 搜索条件 -->

                	 <div class="nest" id="inlineClose">
                            <div class="title-alt">
                                <h6>搜索条件</h6>
                                <div class="titleClose">
                                    <a class="gone" href="#inlineClose">
                                        <span class="entypo-cancel"></span>
                                    </a>
                                </div>
                                <div class="titleToggle">
                                    <a class="nav-toggle-alt" href="#search_div">
                                        <span class="entypo-up-open"></span>
                                    </a>
                                </div>
                            </div>

                         <div class="body-flow" id="search_div" style="display: block">
                             <div class="form_left">
                                 <form role="form" class="form-group-md" id="form-search">
                                     <div class="row">
                                         <div class="col-md-4 col-sm-3">
                                             <div class="form-group">
                                                 <label class="col-sm-4 control-label ">年级：</label>
                                                 <div class="col-sm-8">
                                                     <select class="form-control" id="grade-select" name="grade">
                                                         <option value="2017">2017</option>
                                                     </select>
                                                 </div>
                                             </div>
                                         </div>
                                         <div class="col-md-4 col-sm-3">
                                             <div class="form-group">
                                                 <label class="col-sm-4 control-label ">考试科目：</label>
                                                 <div class="col-sm-8">
                                                     <select class="form-control selectpicker" id="course-select" name="courseName"  >
                                                         <option th:each="list : ${courseList}"
                                                                 th:text="${list.courseName}"
                                                                 th:value="${list.courseName}">
                                                         </option>
                                                     </select>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>

                                     <div class="row" >

                                         <div class="col-md-4 col-sm-3">
                                             <div class="form-group">
                                                 <label class="col-sm-4 control-label">学院：</label>
                                                 <div class="col-sm-8">
                                                     <select class="form-control" id="college_select" name="cid">
                                                         <option th:each="list : ${collegeList}"
                                                                 th:text="${list.collegeName}"
                                                                 th:value="${list.collegeId}">
                                                         </option>
                                                     </select>
                                                 </div>
                                             </div>
                                         </div>
                                         <div class="col-md-4 col-sm-3">
                                         </div>
                                         <div class="col-md-4 col-sm-3">
                                             <button id="search" class="btn btn-success"
                                                      type="button"><i class="fa fa-search"></i>&nbsp;搜索
                                             </button>
                                         </div>
                                     </div>

                                 </form>
                             </div><br>
                             <div class="row">
                                 <div class="col-md-12">
                                     <p>
                                         <strong class="control-label">注：</strong>
                                         1.学院的<u>平时成绩</u>，<u>期末成绩</u>以及<u>总评成绩</u>是学院内所有学生对某一科目的<strong>平均成绩</strong>。<br>
                                         &nbsp;&emsp;&emsp;2.学院成绩分级是以<strong>总评成绩</strong>为标准：<span class="small">优秀：90~100，良好：80~90，中等：70~80，及格：60~70，不及格：低于60</span>
                                     </p>

                                 </div>
                             </div>

                         </div>
                     </div>
                	<!-- END搜索条件 -->
                    <!-- 空白页开始-->
                    <div class="nest" id="Blank_PageClose">
                        <div class="title-alt">
                            <h6>视图</h6>
                            <div class="titleClose">
                                <a class="gone" href="#Blank_PageClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#Blank_Page_Content">
                                    <span class="entypo-up-open"></span>
                                </a>
                            </div>
                        </div>

                        <div class="body-nest" id="Blank_Page_Content">
                           <div id="bar-show">
                               <div id="bar-content"></div>
                           </div>
                        </div>
                    </div>
                </div>
                <!-- 空白页结束 -->
            </div>
            <!-- 结束内容 -->
        </div>
    </div>
</div>
<!-- 结束右边内容 -->
<!-- ###############################代码编写处end############################### -->



<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">

</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>
<!-- 导出 -->
<script th:src="@{/static/admin/assets/js/bootstrap/extensions/export/bootstrap-table-export.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/extensions/export/tableExport.js}" type="text/javascript"></script>

<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>
<script type="text/javascript" src="../../../static/js/echarts/dist/echarts.min.js"></script>
<script th:src="@{/static/admin/assets/js/select2/js/select2.full.min.js}" type="text/javascript"></script>
<script type="text/javascript" src="../../../static/js/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="../../../static/js/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="../../../static/js/echarts/map/js/china.js"></script>
<script type="text/javascript" src="../../../static/js/echarts/map/js/world.js"></script>
<script type="text/javascript" src="../../../static/js/echarts/dist/extension/bmap.min.js"></script>

<script type="text/javascript">
    $("#search").on("click",function () {

        window.addEventListener("resize", function() {
            myEcharts.resize();
        });
        var myEcharts = echarts.init(document.getElementById("bar-content"));
        //2, 指定图表的配置项和数据
        var option = {
            title : {
                text: '专业成绩对比'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: ['平时成绩','期末成绩','总评成绩','成绩标准差']
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '成绩',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                {
                    type: 'value',
                    name: '标准差',
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '平时成绩',
                    type: 'bar',
                    data: []
                },
                {
                    name: '期末成绩',
                    type: 'bar',
                    data: []
                },
                {
                    name: '总评成绩',
                    type: 'bar',
                    data: []
                },
                {
                    name: '成绩标准差',
                    type: 'line',
                    yAxisIndex: 1,
                    data: []
                }
            ]
        };

        $.ajax({
            //几个参数需要注意一下
            type: "get",//方法类型
            url:'/admin/saMajor/bar',
            data: $('#form-search').serialize(),
            dataType:'json',
            success:function (data) {
                console.log(data);
                //给option赋值
                if (data.code==200){
                    option.xAxis[0].data=data.xAxisData;
                    option.series[0].data = data.seriesData[0];
                    option.series[1].data = data.seriesData[1];
                    option.series[2].data = data.seriesData[2];
                    option.series[3].data = data.seriesData[3];
                    // 使用刚指定的配置项和数据显示图表。
                    myEcharts.setOption(option);
                }else {
                    $.modal.alertError(data.msg)
                }
            }
        });
    })



    $(function () {
        $("#college_select").select2({
            placeholder: "请选择"
        });
        $("#grade-select").select2({
            placeholder: "请选择"
        });
        $("#course-select").select2({
            placeholder: "请选择"
        });
    })
</script>

</body>


</html>
